<template>
  <div class="mb-12 scroll-animate">
    <div
      class="inline-block px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full mb-4"
    >
      分类浏览
    </div>
    <h2 class="text-[clamp(1.8rem,4vw,2.8rem)] font-bold text-primary mb-3 leading-tight">
      拍品分类
    </h2>
    <p class="text-gray-600 max-w-2xl text-lg">
      探索各类艺术品分类，从传统书画到现代珠宝，找到您心仪的收藏珍品
    </p>
  </div>
</template>

<script setup lang="ts">
// 页面标题组件，仅负责展示页面头部信息
</script>

<style scoped>
.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-animate.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.text-primary {
  color: var(--primary);
}
</style>
